<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>
<body>
      <h1>登录</h1>
      <p>用户名 : <input type="text" id="username"></p>
      <p>密&nbsp;&nbsp;&nbsp;码 : <input type="text" id="password"></p>
      <p><button id="btn">登录</button></p>

      <script>
            // # 目标 : 把用户的信息发送后端进行验证;
            // ajax : xhr 
            document.querySelector("#btn").onclick = function(){
                  // 1. 获取数据
                  var username_value = document.querySelector("#username").value;
                  var password_value = document.querySelector("#password").value;
                  // # 测试数据;
                  // console.log(username_value , password_value);

                  // 2. 数据交互 : 发送数据;
                  // 发请求 : xhr 发送 http 请求;
                  // 2.1 创建xhr对象;
                  // var xhr = new XMLHttpRequest();
                  // // 2.2 配置 xhr 对象;
                  // xhr.open( "GET" , "./06_project.php");
                  // // 2.3 发送 http 请求;
                  // xhr.send();
                  // // 2.4 接受请求的响应 ;
                  // xhr.onreadystatechange = function(){
                  //       if( xhr.readyState === 4){
                  //             console.log(xhr.responseText);
                  //       }
                  // }
                  // GET 请求如何携带数据 ; 就是把数据放在地址栏里面; 
                  // url?key=value :
                  // 字段的定义一般情况下都是后端主导的; 
                  // 你写入对应的字段即可;
                  // var str = "./06_project.php?username=" + username_value +"&password=" + password_value; 
                  // console.log(str);

                  var xhr = new XMLHttpRequest();
                  // 2.2 配置 xhr 对象;
                  xhr.open( "GET" , "./06_project.php?username=" + username_value +"&password=" + password_value);
                  // 2.3 发送 http 请求;
                  xhr.send();
                  // 2.4 接受请求的响应 ;
                  xhr.onreadystatechange = function(){
                        if( xhr.readyState === 4){
                              // console.log(xhr.responseText);
                              if( xhr.responseText === "登录成功"){
                                    alert("恭喜登录成功");
                              }else{
                                    alert("抱歉，请重新登录!");
                              }
                        }
                  }
            }

      </script>
</body>
</html>